<template>
  <div class="header-box">
    <div class="header-row">
      <el-row :gutter="20">
        <el-col
          :xs="headerRow.elcol01.xs"
          :sm="headerRow.elcol01.sm"
          :md="headerRow.elcol01.md"
          :lg="headerRow.elcol01.lg"
          :xl="headerRow.elcol01.xl"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col
          :xs="headerRow.elcol02.xs"
          :sm="headerRow.elcol02.sm"
          :md="headerRow.elcol02.md"
          :lg="headerRow.elcol02.lg"
          :xl="headerRow.elcol02.xl"
          ><div class="grid-content bg-purple">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="/welcome">首页</el-menu-item>
              <el-menu-item index="/dataManage">数据管理</el-menu-item>
              <el-menu-item index="/map">地图</el-menu-item>
              <el-menu-item index="/handle">处理中心</el-menu-item>
            </el-menu>
          </div></el-col
        >
        <el-col
          :xs="headerRow.elcol03.xs"
          :sm="headerRow.elcol03.sm"
          :md="headerRow.elcol03.md"
          :lg="headerRow.elcol03.lg"
          :xl="headerRow.elcol03.xl"
          ><div class="grid-content bg-purple"></div
        ></el-col>
        <el-col
          :xs="headerRow.elcol04.xs"
          :sm="headerRow.elcol04.sm"
          :md="headerRow.elcol04.md"
          :lg="headerRow.elcol04.lg"
          :xl="headerRow.elcol04.xl"
          ><div class="grid-content bg-purple"></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
const headerRow = {
  A: 7,
  B: 11,
  C: 4,
  D: 2,
  E: 1,
};
export default {
  data() {
    return {
      headerRow: {
        gutter: 20,
        elcol01: {
          xs: headerRow.A,
          sm: headerRow.A,
          md: headerRow.A,
          lg: headerRow.A,
          xl: headerRow.A,
        },
        elcol02: {
          xs: headerRow.B,
          sm: headerRow.B,
          md: headerRow.B,
          lg: headerRow.B,
          xl: headerRow.B,
        },
        elcol03: {
          xs: headerRow.C,
          sm: headerRow.C,
          md: headerRow.C,
          lg: headerRow.C,
          xl: headerRow.C,
        },
        elcol04: {
          xs: headerRow.D,
          sm: headerRow.D,
          md: headerRow.D,
          lg: headerRow.D,
          xl: headerRow.D,
        },
      },
      activeIndex: 1,
    };
  },
  methods: {
    handleSelect(index) {
      console.log(index);
      this.$router.push(index);
    },
  },
};
</script>

<style scoped>
.header-box {
  height: 5rem;
  width: 100%;
  background-color: rgb(90, 179, 38);
  position: relative;
}
.header-row {
  /* position: absolute; */
  /* top: 50%;
  transform: translateY(-50%); */
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
